<template>
  <div class="d-flex justify-content-center" :style="{minHeight: height+'px'}">
    <div class="po-container">
      <div class="po-content po-column" ref="personal" >
        <el-row  class="po-content-desc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>{{getFirstName(pageName)}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{pageName}}</el-breadcrumb-item>
          </el-breadcrumb>
            <router-view/>
        </el-row>
      </div>
      <div class="po-menu po-column" ref="navmenu" :style="{height: height+'px'}" id="pomenu">
        <el-menu default-active="3" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handSelected" :collapse="isCollapse" ref="menu">
          <el-submenu :index="index + 1 + ''" v-for="(pages, index) in routers" :key="pages.name">
            <template slot="title">
              <img :src="pages.icon" alt="">
              <span slot="title">{{pages.title}}</span>
            </template>
            <el-menu-item v-if="!(typeof page.hidden === 'function' ? page.hidden(userType) : page.hidden)" :index="page.title" v-for="page in pages.children" :key="page.name">{{ page.title }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import { appRouter } from '../router/router'

  export default {
    title: '个人相关操作',
    name: 'personal-oper',
    data() {
      return {
        isCollapse: false, // 菜单是否收起
        pageName: '',
        currentTabComponent: '',
        routers: appRouter,
      }
    },
    mounted () {
      this.$store.commit('setIsHome', false)
      this.openAll()
      this.getpage()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        let name = to.name
        vm.setPageName(name)
      })
    },
    methods: {
      // 打开所有的菜单
      openAll () {
        this.$refs.menu.open('1')
        this.$refs.menu.open('2')
        this.$refs.menu.open('3')
      },
      handleOpen (key, keyPath) {
      },
      handleClose (key, keyPath) {
        // 强制打开
        this.$refs.menu.open(key)
      },
      handSelected (key, keyPath) {
        let indexs = this.getPage(key)
        if (indexs) {
          let page = this.routers[indexs[0]].children[indexs[1]]
          this.$router.replace({name: page.name})
        } else {
          his.$router.replace({name: 'promp'})
        }
      },
      getpage () {
        let pageName = Cookies.get('pagename')
        if (pageName) {
          this.pageName = pageName
          this.$refs.menu.activeIndex = pageName
        } else {
          this.pageName = ''
        }
      },
      getFirstName (name) {
        if (!name) {
          return ''
        }
        let indexs = this.getPage(name)
        return this.routers[indexs[0]].title
      },
      setPageName (str) {
        let indexs = this.getPage(str, 'name')
        if (!indexs) {
          return
        }
        this.pageName = this.routers[indexs[0]].children[indexs[1]].title
        Cookies.set('pagename', this.pageName)
        this.$refs.menu.activeIndex = this.pageName
      },
      // 获取需要router信息
      getPage (str, key='title') {
        if (!str) {
          return ''
        }
        for (let i = 0; i < this.routers.length; i++) {
          for (let j = 0; j < this.routers[i].children.length; j++) {
            if (this.routers[i].children[j][key] === str) {
              return [i, j]
            }
          }
        }
      },
    },
    computed: {
      userType () {
        return this.$store.state.user.user ? this.$store.state.user.user.user.userType : ''
      },
      height () {
        return this.$store.state.height.client - 120
      }
    },
    watch: {
      '$route' (to) {
        this.setPageName(to.name)
      }
    },
    beforeDestroy () {
      Cookies.remove('pagename')
    }
  }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .po-container {
    width: 1260px;
    padding-left: 200px;   /* LC width */
    cursor: pointer;
  }
  .po-container:hover .po-title {
    color: #94C05A;
  }
  .po-container .po-column {
      height: auto;
      position: relative;
      float: left;
      /* overflow: auto; */
  }
  .po-content {
      width: 100%;
  }
  .po-menu {
      width: 200px;
      right: 200px;          /* LC width */
      margin-left: -100%;
      /* background-color: rgba(148, 192, 90, 0.2); */
      background-color: #EEF1E9;
  }
  .po-menu .el-menu {
    border-right: 0;
    background: transparent;
    font-size: 18px;
  }
  .po-menu img {
    width: 18px;
    margin-right: 5px;
  }
  .po-menu .el-submenu__title {
    background-color: rgba(148, 192, 90, 0.1);
  }
  .po-menu .el-menu-item {
    border-left: 5px solid transparent;
    height: 40px;
  }
  #pomenu .el-menu-item, #pomenu .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }
  .po-menu .el-menu-item.is-active {
    color: #000000;
    background: #FFFFFF;
    border-left: 5px solid #94C05A;
  }
  .po-menu .el-icon-arrow-down:before {
    content: "";
  }
</style>
